---
import { BaseLayout } from '../layouts';
import { CertificationsContent } from '../components/sections';
import {
  SITE_BASE_URL,
  CERTIFICATIONS_PAGE_PATH,
  IMAGE_PATHS,
  CERTIFICATIONS_DESCRIPTION,
  CERTIFICATIONS_IMAGE_ALT,
  OG_IMAGE_DIMENSIONS
} from '../constants';
import { CERTIFICATIONS_CONTENT } from '../content';
import { CertificationsEffects } from '../components/sections';
import { getCurrentLang } from '../utils';
import '../styles/components/certifications.css';

const langDefault = getCurrentLang();
const langKey = langDefault.startsWith('zh') ? 'zh' : 'en';
const title = CERTIFICATIONS_CONTENT[langKey].heading;
const titleZh = CERTIFICATIONS_CONTENT.zh.heading;
const titleEn = CERTIFICATIONS_CONTENT.en.heading;
---

<BaseLayout
  lang={langDefault}
  titleZh={titleZh}
  titleEn={titleEn}
  title={title}
  description={CERTIFICATIONS_DESCRIPTION}
  canonical={`${SITE_BASE_URL}${CERTIFICATIONS_PAGE_PATH}/`}
  og={{
    title: titleEn,
    description: CERTIFICATIONS_DESCRIPTION,
    url: `${SITE_BASE_URL}${CERTIFICATIONS_PAGE_PATH}/`,
    image: `${SITE_BASE_URL}${IMAGE_PATHS.CERTIFICATIONS_COVER}`,
    imageWidth: OG_IMAGE_DIMENSIONS.WIDTH,
    imageHeight: OG_IMAGE_DIMENSIONS.HEIGHT,
    imageAlt: CERTIFICATIONS_IMAGE_ALT,
    secureImageUrl: `${SITE_BASE_URL}${IMAGE_PATHS.CERTIFICATIONS_COVER}`
  }}
  twitter={{
    title: titleEn,
    description: CERTIFICATIONS_DESCRIPTION,
    image: `${SITE_BASE_URL}${IMAGE_PATHS.CERTIFICATIONS_COVER}`,
    imageAlt: CERTIFICATIONS_IMAGE_ALT
  }}
>
  <div class="c-cert-page">
    <CertificationsContent client:load />
    <CertificationsEffects client:load />
  </div>
</BaseLayout>
